import React from 'react'
import { Square } from '../../component'
import { CalculateWinnerSquareArray } from '../../utils/calculateWinner'
import '../../css/game.css'
const Board = (props) => {
    const renderSquare = (i, winnerSquareArray) => {
        return (
            <Square
                value={props.squares[i]}
                key={i}
                onClick={() => props.onClick(i)}
                isWinnerSquare={winnerSquareArray.includes(i)}
            />
        );
    }

    const getboard = () => {
        const { squares } = props
        const winnerSquareArray = CalculateWinnerSquareArray(squares)
        const result = Array(3).fill(null).map((item, index) => {
            const boardRow = Array(3).fill(null).map((item, i) => {
                return (
                    renderSquare(index * 3 + i, winnerSquareArray)
                )
            })
            return (
                <div className="board-row" key={index}>
                    {boardRow}
                </div>
            )
        })
        return result
    }

    return (
        <div>
            {getboard()}
        </div>
    )
}

export default Board